<!--
 * @Author: kaka
 * @Date: 2025-05-17 20:19:57
 * @LastEditTime: 2025-11-16 15:16:11
 * @Description: 
-->
<template>
  <div
    class="horizontal-scroll-wrap"
    :style="{ '--w': sytle.w + 'px', '--h': sytle.h + 'px' }"
  >
    <div class="list-wrap">
      <div class="list-item" v-for="i in 7" :key="i">
        {{ i }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue';

const sytle = ref({
  w: 0,
  h: 0,
});

const updateSize = () => {
  nextTick(() => {
    const ele = document.querySelector('.horizontal-scroll-wrap');
    if (ele) {
      sytle.value = {
        w: ele.offsetWidth,
        h: ele.offsetHeight,
      };
    }
  });
};

onMounted(() => {
  updateSize(); // 初始获取尺寸
  window.addEventListener('resize', updateSize); // 添加监听
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', updateSize); // 移除监听
});
</script>

<style lang="less" scoped>
.horizontal-scroll-wrap {
    width: 100%;
    box-sizing: border-box;
    height: 100vh;
    background: #d07070;
    .list-wrap {
        width: var(--h);
        height: var(--w);
        overflow: hidden scroll;
        background: #ac9595;
        transform-origin: left top;
        transform: translateY(var(--h)) rotate(270deg);
        &::-webkit-scrollbar {
          display: none;
        }
        -ms-overflow-style:  none;
        scrollbar-width: none;
      .list-item {
        height: var(--h);
        width: 200px;
        transform: rotate(90deg);
      }
    }
}
</style>